<template>
  <div id="dispatch-page" class="main-content">
    <!-- 顶部导航栏 -->
    <el-container>
      <el-main
        style="
          padding: 14px;
          background-color: #0c1e3e;
          height: calc(100vh - 60px);
        "
      >
        <!-- 主内容区域 -->
        <el-row :gutter="16" style="height: 100%">
          <!-- 左侧服务需求统计 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 服务资源详情 -->
            <el-card
              class="custom-card glow-card"
              id="leftCard"
              style="
                flex: 1;
                min-height: 600px;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header" style="margin-top: 8px">
                <i
                  class="el-icon-info"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff; font-weight: 600">服务资源详情</span>
              </div>

              <div class="service-detail">
                <div v-if="hasServiceResource">
                  <div
                    v-for="item in selectedServiceResource"
                    :key="item.id"
                    class="dispatch-item"
                  >
                    <div class="detail-item">
                      <div class="detail-label">服务组织名称</div>
                      <div class="detail-value ellipsis">
                        {{ item.serviceSubjectName }}
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">主要服务产业</div>
                      <div class="detail-value">
                        {{
                          item.productName === null ? "未知" : item.productName
                        }}
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">农机类型</div>
                      <div class="detail-value ellipsis">
                        {{
                          item.productType === null ? "未知" : item.productType
                        }}
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">服务价格</div>
                      <div class="detail-value">
                        {{ item.price }}元/{{
                          item.unit === null ? "亩" : item.unit
                        }}
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">完成次数</div>
                      <div class="detail-value">
                        <div class="completion-info">
                          <span> {{ item.dealNum }}次</span>
                          <el-progress
                            :percentage="99.5"
                            :stroke-width="6"
                            :show-text="false"
                            class="small-progress"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">服务时间</div>
                      <div class="detail-value">
                        {{ item.startTime }}到{{ item.endTime }}
                      </div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">联系人</div>
                      <div class="detail-value">{{ item.contactPerson }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">联系电话</div>
                      <div class="detail-value">{{ item.contactPhone }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">距离</div>
                      <div class="detail-value">
                        {{ (item.distance.value / 1000).toFixed(2) }}公里
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div class="no-data">
                    <div
                      style="
                        text-align: center;
                        color: #8aa4ce;
                        padding: 40px 20px;
                      "
                    >
                      <i
                        class="el-icon-info"
                        style="
                          font-size: 24px;
                          margin-bottom: 10px;
                          display: block;
                        "
                      ></i>
                      暂无服务资源详情
                      <div style="font-size: 12px; margin-top: 10px">
                        请点击右侧智能调度中的"立即响应"获取服务资源
                      </div>
                    </div>
                  </div>
                </div>

                <div class="action-buttons">
                  <el-button size="medium" class="glow-effect"
                    >查看详情</el-button
                  >
                  <el-button size="medium" class="glow-effect"
                    >发送消息</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 中间区域 - 地图 -->
          <el-col
            :span="12"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 社会化服务资源在线分布图 -->
            <el-card
              class="custom-card glow-card"
              id="centerCard"
              style="
                flex: 1;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header">
                <i
                  class="el-icon-map-location"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff; font-weight: 600"
                  >社会化服务资源在线分布图</span
                >
                <div class="map-controls">
                  <el-button
                    size="small"
                    type="text"
                    class="map-control-btn"
                    @click="resetMap"
                  >
                    <i class="el-icon-refresh-right"></i>
                  </el-button>
                </div>
              </div>
              <div
                style="width: 100%; height: 100%; min-height: 710px"
                ref="mapChart"
                class="chart-container"
              ></div>
            </el-card>
          </el-col>

          <!-- 右侧区域 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 智能调度 -->
            <el-card
              class="custom-card glow-card"
              style="
                flex: 1;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header">
                <i
                  class="el-icon-s-grid"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff">智能调度</span>
                <div class="map-controls">
                  <el-button
                    size="small"
                    type="text"
                    class="map-control-btn"
                    @click="refreshDispatchList"
                  >
                    <i class="el-icon-refresh-right"></i>
                  </el-button>
                </div>
              </div>

              <!-- 智能调度内容区域 -->
              <div class="dispatch-container">
                <!-- 数据列表区域 -->
                <div class="dispatch-list-container">
                  <div v-if="loading" class="loading-state">
                    <i class="el-icon-loading"></i> 加载中...
                  </div>
                  <div
                    v-else-if="dispatchItems.length === 0"
                    class="empty-state"
                  >
                    暂无数据
                  </div>
                  <div v-else class="dispatch-list">
                    <div
                      v-for="item in dispatchItems"
                      :key="item.id"
                      :class="[
                        'dispatch-item',
                        { selected: item.id === selectedDispatchItemId },
                      ]"
                    >
                      <img
                        :src="item.pictureUrl"
                        :alt="item.title"
                        class="dispatch-image"
                      />
                      <div class="dispatch-info">
                        <div class="dispatch-title">{{ item.title }}</div>
                        <div class="dispatch-detail">
                          <div class="detail-row">
                            <span>作物类型：</span>
                            <span>{{ item.title }}</span>
                          </div>
                          <div class="detail-row">
                            <span>需求时间：</span>
                            <span
                              >{{ item.startTime }}到{{ item.endTime }}</span
                            >
                          </div>
                          <div class="detail-row">
                            <span>需求面积：</span>
                            <span>{{ item.amount }}{{ item.unit }}</span>
                          </div>
                          <div class="detail-row">
                            <span>预算价格：</span>
                            <span>{{ item.price }}元/{{ item.unit }}</span>
                          </div>
                          <div class="detail-row">
                            <span>需求地址：</span>
                            <span>{{ item.address }}</span>
                          </div>
                          <div class="detail-row">
                            <span>联系人：</span>
                            <span>{{ item.publishName }}</span>
                          </div>
                          <div class="detail-row">
                            <span>联系电话：</span>
                            <span>{{ item.phoneNumber }}</span>
                          </div>
                          <div class="detail-row">
                            <span>发布时间：</span>
                            <div>{{ item.publishTime }}</div>
                          </div>
                        </div>
                        <el-button
                          type="success"
                          size="small"
                          class="dispatch-btn"
                          @click="dispatchService(item)"
                          >立即响应</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 分页组件 - 固定在底部 -->
                <div class="pagination-container">
                  <el-pagination
                    background
                    :current-page="pageNum"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    @current-change="handleCurrentChange"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import getMap from "../../api/getMap";
import * as echarts from "echarts";
import {
  reqRequirements,
  reqServiceResources,
  reqResponseRequirements,
} from "@/api";
export default {
  name: "DispatchPage",
  data() {
    return {
      serviceResources: [],
      dispatchItems: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      loading: false,
      selectedServiceResource: [], // 当前选中的服务资源
      hasServiceResource: false, // 是否有服务资源
      selectedDispatchItemId: null, // 当前选中的服务需求卡片ID
      mapChart: null, // 存储地图实例
    };
  },
  mounted() {
    this.initMapChart();
    this.fetchDispatchData();
    // 添加页面加载动画效果
    this.$nextTick(() => {
      const cards = document.querySelectorAll(".custom-card");
      cards.forEach((card, index) => {
        setTimeout(() => {
          card.style.opacity = "1";
          card.style.transform = "translateY(0)";
        }, 100 * index);
      });
    });
  },
  beforeDestroy() {
    // 清理事件监听器
    if (this.mapChart) {
      window.removeEventListener("resize", this.handleResize);
      this.mapChart.dispose();
    }
  },
  methods: {
    // 获取智能调度数据
    fetchDispatchData() {
      this.loading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      reqRequirements(params)
        .then((response) => {
          if (response.data.code === 200) {
            this.loading = false;
            this.dispatchItems = response.data.data.records;
            // 更新分页信息
            this.total = response.data.data.total || 0;
          }
        })
        .catch((error) => {
          console.error("获取调度数据失败:", error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 处理分页大小变化
    // handleSizeChange(size) {
    //   this.pageSize = size;
    //   this.pageNum = 1;
    //   this.fetchDispatchData();
    // },
    // 处理当前页码变化
    handleCurrentChange(current) {
      this.pageNum = current;
      this.fetchDispatchData();
    },
    // 初始化地图散点图
    initMapChart() {
      this.mapChart = echarts.init(this.$refs["mapChart"]);

      // 显示加载动画
      this.mapChart.showLoading({
        text: "数据加载中...",
        textColor: "#fff",
        maskColor: "rgba(0, 0, 0, 0.3)",
        spinnerRadius: 20,
      });

      // 获取中国地图数据并绘制散点图
      getMap
        .then((res) => {
          // 注册中国地图
          echarts.registerMap("china", res.data);

          // 通过axios请求获取服务资源数据
          return this.generateServiceResources()
            .then((data) => {
              this.serviceResources = data;

              // 配置地图散点图选项
              const option = {
                backgroundColor: "#0c1e3e",
                title: {
                  text: "社会化服务资源在线分布图",
                  left: "center",
                  textStyle: {
                    color: "#fff",
                    fontSize: 16,
                  },
                },
                tooltip: {
                  trigger: "item",
                  formatter: function (params) {
                    // 显示城市名称和服务次数
                    return (
                      params.value[3] +
                      "<br/>服务次数: " +
                      params.value[2] +
                      "次"
                    );
                  },
                  backgroundColor: "rgba(0, 0, 0, 0.7)",
                  borderColor: "#333",
                  textStyle: {
                    color: "#fff",
                  },
                },
                geo: {
                  map: "china",
                  roam: true,
                  label: {
                    emphasis: {
                      show: true,
                      color: "#fff",
                    },
                  },
                  itemStyle: {
                    normal: {
                      areaColor: "#142957",
                      borderColor: "#09488e",
                    },
                    emphasis: {
                      areaColor: "#09488e",
                    },
                  },
                },
                series: [
                  {
                    name: "服务资源",
                    type: "scatter",
                    coordinateSystem: "geo",
                    data: this.serviceResources,
                    symbolSize: function (val) {
                      return Math.max(val[2] / 100, 12);
                    },
                    label: {
                      show: true,
                      position: "top",
                      formatter: function (params) {
                        // 直接显示服务次数
                        return params.value[2] + "次";
                      },
                      color: "#fff",
                      fontSize: 10,
                      fontWeight: "bold",
                    },
                    itemStyle: {
                      // 使用渐变色填充散点
                      color: function (params) {
                        // 根据服务次数设置不同颜色
                        const value = params.value[2];
                        let baseColor = "#32cd32";
                        if (value > 2000) baseColor = "#ff4500";
                        else if (value > 1000) baseColor = "#ff7f50";
                        else if (value > 500) baseColor = "#ffd700";

                        // 创建径向渐变
                        return new echarts.graphic.RadialGradient(
                          0.5,
                          0.5,
                          0.5,
                          [
                            { offset: 0, color: "#fff" },
                            { offset: 0.6, color: baseColor },
                            { offset: 1, color: baseColor },
                          ]
                        );
                      },
                      // 添加边框效果
                      borderColor: "#fff",
                      borderWidth: 1.5,
                      // 添加发光效果
                      shadowBlur: 15,
                      shadowColor: function (params) {
                        const value = params.value[2];
                        let shadowColor = "#32cd32";
                        if (value > 2000) shadowColor = "#ff4500";
                        else if (value > 1000) shadowColor = "#ff7f50";
                        else if (value > 500) shadowColor = "#ffd700";
                        return shadowColor;
                      },
                      opacity: 0.9,
                    },
                    emphasis: {
                      // 鼠标悬停时的强调效果
                      scale: true,
                      scaleSize: 10,
                      itemStyle: {
                        shadowBlur: 25,
                        shadowColor: function (params) {
                          const value = params.value[2];
                          let shadowColor = "#32cd32";
                          if (value > 2000) shadowColor = "#ff4500";
                          else if (value > 1000) shadowColor = "#ff7f50";
                          else if (value > 500) shadowColor = "#ffd700";
                          return shadowColor;
                        },
                      },
                      label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: "bold",
                        color: "#fff",
                      },
                    },
                  },
                ],
              };

              this.mapChart.setOption(option);

              // 窗口大小改变时，重新调整图表大小
              this.handleResize = () => {
                this.mapChart.resize();
              };
              window.addEventListener("resize", this.handleResize);
            })
            .then(() => {
              this.mapChart.hideLoading(); // 所有数据处理完成后隐藏加载状态
            });
        })
        .catch((error) => {
          console.error("初始化地图或获取服务资源数据失败:", error);
          this.mapChart.hideLoading();
          this.mapChart.setOption({
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              left: "center",
              textStyle: {
                color: "#ff4500",
                fontSize: 16,
              },
            },
            backgroundColor: "#0c1e3e",
          });
        });
    },

    // 通过axios请求获取服务资源数据
    generateServiceResources() {
      return new Promise((resolve) => {
        // 发起axios请求获取服务资源数据
        reqServiceResources()
          .then((res) => {
            if (res.data.code === 200 && res.data.data) {
              // 假设API返回的数据已经是正确的格式：[[longitude, latitude, count, name], ...]
              resolve(res.data.data);
            } else {
              // 如果返回数据不符合预期，使用默认的模拟数据
              console.warn("获取服务资源数据格式异常，使用默认数据");
              resolve(this.getDefaultServiceResources());
            }
          })
          .catch((error) => {
            console.error("获取服务资源数据失败:", error);
            // 请求失败时，使用默认的模拟数据作为回退
            resolve(this.getDefaultServiceResources());
          });
      });
    },

    // 默认的模拟服务资源数据，作为请求失败时的回退
    getDefaultServiceResources() {
      // 中国主要城市的经纬度和服务次数
      const cityData = [
        [116.405285, 39.904989, 2500, "北京"],
        [121.472644, 31.231706, 2200, "上海"],
        [113.280637, 23.125178, 1800, "广州"],
        [114.085947, 22.547, 1600, "深圳"],
        [104.065735, 30.659462, 1500, "成都"],
        [120.153576, 30.287459, 1400, "杭州"],
        [114.305523, 30.59285, 1300, "武汉"],
        [108.948024, 34.263161, 1200, "西安"],
        [106.504962, 29.533155, 1100, "重庆"],
        [118.767413, 32.041544, 1000, "南京"],
        [117.190182, 39.125596, 950, "天津"],
        [120.619585, 31.298863, 900, "苏州"],
        [112.982279, 28.19409, 850, "长沙"],
        [120.382661, 36.101009, 800, "青岛"],
        [113.665412, 34.757975, 750, "郑州"],
        [113.749638, 23.049663, 700, "东莞"],
        [121.548884, 29.868333, 650, "宁波"],
        [113.122959, 23.029663, 600, "佛山"],
        [117.283042, 31.86119, 550, "合肥"],
        [121.614624, 38.913419, 500, "大连"],
      ];

      return cityData;
    },

    // 服务响应
    dispatchService(item) {
      // 设置当前选中的服务需求卡片ID
      this.selectedDispatchItemId = item.id;

      const params = {
        id: item.id,
        userId: item.userId,
        typeId: item.typeId,
        typePid: item.typePid,
        longitude: item.longitude,
        latitude: item.latitude,
      };

      // 发起axios请求响应服务需求
      reqResponseRequirements(params)
        .then((res) => {
          this.$message({
            type: "success",
            message: "服务响应成功",
          });
          this.getServiceData(res.data.data);
        })
        .catch((error) => {
          console.error("服务分配失败:", error);
          this.$message({
            type: "error",
            message: "服务分配失败",
          });
        });
    },
    // 处理API返回的服务资源数据
    getServiceData(data) {
      this.selectedServiceResource = data;
      console.log("服务资源数据:", this.serviceResources);
      this.hasServiceResource = data.length > 0;
    },
    // 重置地图
    resetMap() {
      if (this.mapChart) {
        this.mapChart.dispatchAction({
          type: "restore",
        });
        // 添加刷新动画效果
        this.mapChart.showLoading({
          text: "重置中...",
          textColor: "#fff",
          maskColor: "rgba(0, 0, 0, 0.3)",
        });
        setTimeout(() => {
          this.mapChart.hideLoading();
        }, 500);
      }
    },
    // 刷新调度列表
    refreshDispatchList() {
      // 模拟刷新操作
      setTimeout(() => {
        // 可以在这里重新加载数据, 例如通过Ajax加载数据
        this.fetchDispatchData();
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* 全局样式优化 */
.main-content {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
}

/* 确保卡片主体内容填满空间 */
.el-card__body {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 卡片样式优化 */
.custom-card {
  opacity: 0;
  height: calc(100% - 40px);
  background: rgba(16, 36, 71, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glow-card {
  /* 移除光影效果，保留基本样式 */
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(90, 200, 250, 0.2);
  background: rgba(12, 30, 62, 0.5);
}

/* 服务详情样式 */
.service-detail {
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30, 77, 133, 0.3);
  transition: background-color 0.3s ease;
}

.detail-item:hover {
  background-color: rgba(90, 200, 250, 0.05);
  border-radius: 4px;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  color: #8aa4ce;
  font-size: 13px;
  font-weight: 500;
}

.detail-value {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.completion-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.small-progress {
  flex: 1;
  max-width: 80px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  flex-shrink: 0;
}

.action-buttons .el-button {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 0.8),
    rgba(90, 200, 250, 0.8)
  );
  border: 1px solid rgba(90, 200, 250, 0.5);
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-buttons .el-button:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 1),
    rgba(90, 200, 250, 1)
  );
  border-color: #5ac8fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 200, 250, 0.4);
}

.action-buttons .el-button:active {
  transform: translateY(0);
}

/* 右侧卡片容器布局 */
.dispatch-container {
  display: flex;
  flex-direction: column;
  height: 75vh;
  width: 100%;
  position: relative;
}

/* 数据列表容器 - 可滚动 */
.dispatch-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 50px);
  padding: 10px;
  min-height: 0; /* 重要：确保flex子元素可以收缩 */
}

/* 分页容器 - 固定在底部 */
.pagination-container {
  flex-shrink: 0;
  padding: 15px 10px;
  background: rgba(12, 30, 62, 0.8);
  border-top: 1px solid rgba(90, 200, 250, 0.2);
  margin-top: auto; /* 确保分页器始终在底部 */
}

/* 数据列表样式 */
.dispatch-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 调度项样式优化 */
.dispatch-item {
  background: rgba(24, 55, 101, 0.6);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #1e4d85;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%; /* 确保宽度自适应 */
  box-sizing: border-box; /* 包含padding和border在宽度内 */
}

.dispatch-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(90, 200, 250, 0.2);
  border-color: #5ac8fa;
}

/* 保留顶部的装饰条但确保它不会影响图片 */
.dispatch-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5ac8fa, transparent);
  z-index: 1;
}

/* 选中的服务需求卡片样式 */
.dispatch-item.selected {
  border-color: #32cd32;
  background: rgba(50, 205, 50, 0.1);
  box-shadow: 0 0 20px rgba(50, 205, 50, 0.3);
}

.dispatch-item.selected::before {
  background: linear-gradient(90deg, transparent, #32cd32, transparent);
  height: 3px;
}

.dispatch-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid rgba(90, 200, 250, 0.3);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.dispatch-item:hover .dispatch-image {
  transform: scale(1.02);
}

.dispatch-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 0 0 10px rgba(90, 200, 250, 0.3);
}

.dispatch-detail {
  margin-bottom: 15px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: #8aa4ce;
  transition: color 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.detail-row:hover {
  color: #a8c7ff;
}

.detail-row span:last-child {
  color: #fff;
  text-align: right;
  max-width: 60%;
  word-break: break-word; /* 防止长文本溢出 */
}

.dispatch-btn {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(34, 193, 195, 0.8),
    rgba(253, 187, 45, 0.8)
  );
  border: none;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dispatch-btn:hover {
  background: linear-gradient(
    90deg,
    rgba(34, 193, 195, 1),
    rgba(253, 187, 45, 1)
  );
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 193, 195, 0.4);
}

.dispatch-btn:active {
  transform: translateY(0);
}

/* 加载和空状态样式 */
.loading-state,
.empty-state {
  text-align: center;
  color: #8aa4ce;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 地图控制按钮样式 */
.map-controls {
  margin-left: auto;
}

.map-control-btn {
  color: #8aa4ce;
  font-size: 16px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.map-control-btn:hover {
  color: #5ac8fa;
  transform: rotate(90deg);
}

/* 美化滚动条 */
.dispatch-list-container::-webkit-scrollbar {
  width: 6px;
}

.dispatch-list-container::-webkit-scrollbar-track {
  background: rgba(12, 30, 62, 0.5);
  border-radius: 3px;
}

.dispatch-list-container::-webkit-scrollbar-thumb {
  background: rgba(0, 187, 236, 0.5);
  border-radius: 3px;
}

.dispatch-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 187, 236, 0.8);
}

/* 分页组件样式优化 */
.pagination-container .el-pagination {
  color: #8aa4ce;
  width: 100%;
  display: flex;
  justify-content: center;
}

.pagination-container .el-pagination__total {
  color: #8aa4ce;
}

.pagination-container .el-pagination button,
.pagination-container .el-pagination span:not([class*="suffix"]) {
  color: #8aa4ce;
  background-color: rgba(12, 30, 62, 0.5);
  border: 1px solid rgba(90, 200, 250, 0.3);
  transition: all 0.3s ease;
}

.pagination-container .el-pagination button:hover {
  color: #5ac8fa;
  background-color: rgba(12, 30, 62, 0.8);
  border-color: #5ac8fa;
}

.pagination-container .el-pagination .el-pager li {
  color: #8aa4ce;
  transition: all 0.3s ease;
}

.pagination-container .el-pagination .el-pager li:hover {
  color: #5ac8fa;
}

.pagination-container .el-pagination .el-pager li.active {
  color: #fff;
  background-color: rgba(90, 200, 250, 0.5);
  border-color: #5ac8fa;
}

/* 装饰性的发光效果 */
.glow-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(90, 200, 250, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-effect:hover::after {
  opacity: 1;
}

/* 无数据状态样式 */
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}

/* 图表容器样式 */
.chart-container {
  position: relative;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .el-col-6,
  .el-col-12 {
    width: 100%;
    margin-bottom: 16px;
  }

  .el-main {
    height: auto !important;
  }

  .dispatch-item {
    padding: 12px;
  }

  .dispatch-image {
    height: 100px;
  }

  .detail-row {
    font-size: 12px;
  }
}

/* 确保卡片内容不溢出 */
.custom-card {
  overflow: hidden;
}

.el-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}
</style>
